<template>
  <view class="video_less_view" @click="goTopicVideo()">
    <view class="title">{{ title || '科目一 · 3小时精讲' }}</view>
    <view class="block-container4">
      <view class="pic"
            :style="{'background-image': styleBgImageUrl('https://down.qwdata.vip/app_icon/1701420810566')}">
        <view class="bofang"></view>
      </view>
      <view class="people" v-if="showPeople">1.3万人正在看</view>
      <view class="flex v f1" v-if="tips1">
        <view class="tips1">{{ tips1 }}</view>
        <view class="tips2">{{ tips2 }}</view>
        <view class="f1"></view>
        <view class="btn">{{ btnText || '看视频' }}</view>
      </view>
      <view class="flex v f1" v-else>
        <view class="label">{{ labels[0] }} {{ labels[1] }}</view>
        <view class="label">{{ labels[2] }} {{ labels[3] }}</view>
        <view class="label">{{ labels[4] }} {{ labels[5] || '' }}</view>
        <view class="f1"></view>
        <view class="btn">{{ btnText || '看视频' }}</view>
      </view>
    </view>
  </view>
</template>

<script>
import {styleBgImageUrl} from "../../libs/utils";

export default {
  name: "VideoLessonView",
  props: ['CourseId', 'title', 'videos', 'questionId', 'btnText', 'tips1', 'tips2', 'showPeople'],
  data() {
    return {};
  },
  computed: {
    labels() {
      return [
        '易考题',
        '扣分题',
        '罚款题',
        '超速题',
        '标志题'
      ]
    },
  },
  methods: {
    styleBgImageUrl,
    goTopicVideo(id = null) {
      this.$emit('videoClick')
      let url = '/pages/course_list/course_list?courseId=' + 'QNW000003'
      if (id) {
        url += '&contentId=' + id
      }
      if (this.questionId) {
        url += '&questionId=' + this.questionId
      }
      uni.navigateTo({
        url
      })
    }
  }
}
</script>

<style lang="scss">
.video_less_view {
  box-sizing: border-box;
  box-shadow: 0 2px 10px #5c5c5c1a;
  background-image: linear-gradient(92deg, #FFE8E4 100%, #FFEDE9 43%, #FFF7F3 0%);
  width: 680rpx;
  padding: 35rpx;
  margin: 0 36rpx;
  margin-top: 25rpx;
  border-radius: 24rpx;
  background-repeat: no-repeat;
  position: relative;
  background-size: contain;
  .title {
    font-size: 17px;
    color: #48110D;
    font-weight: bold;
    line-height: 24px;
    margin-bottom: 30rpx;
    margin-left: 10rpx;
  }
  .people {
    position: absolute;
    right: 35rpx;
    top: 43rpx;
    color: rgba(72, 17, 13, 0.8);
    font-size: 12px;
  }

  .block-container4 {
    display: flex;

    .pic {
      width: 352rpx;
      height: 204rpx;
      border-radius: 24rpx;
      border: 3px solid #fff;
      margin-right: 30rpx;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      display: flex;
      justify-content: center;
      align-items: center;

      .bofang {
        background-image: url("http://down.qwdata.vip/app_icon/1689063074661");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        width: 72rpx;
        height: 72rpx;
      }
    }

    .label {
      font-size: 14px;
      color: rgba(72, 17, 13, 0.9);
      font-weight: bold;
      line-height: 22px;
    }
    .tips1, .tips2 {
      font-size: 15px;
      color: rgba(72, 17, 13, 0.9);
      font-weight: bold;
      margin-top: 5rpx;
      line-height: 22px;
    }
  }

  .btn {
    height: 66rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    color: #fff;
    background-color: #FD6144;
    border-radius: 100rpx;
  }
}
</style>
